<div id="map-layer-search" (click)="stopPropagation($event)">
    <nz-input-group nzSearch [nzAddOnAfter]="suffixIconButton">
        <input [(ngModel)]="searchResult" class="layer-search-input" type="text" nz-input placeholder="请输入图层或者地图集的名称"
               (click)="layerSearchInputFocus($event)"/>
    </nz-input-group>
    <ng-template #suffixIconButton>
        <button (click)="search()" nz-button nzType="primary" nzSearch><i nz-icon nzType="search"></i></button>
    </ng-template>

    <div *ngIf="searchResultContentState" class="search-result-content">
        <div id="layers" *ngIf="searchResultContentSwitch">
            <div class="layers">
                <h3>图层<span class="skip-label-creening" (click)="searchResultContentSwitch=false">点我可以标签筛选哦</span></h3>
                <div class="layers-content">
                    <div *ngFor="let item of layers" class="layers-content-item">
                        <label nz-checkbox [(ngModel)]="item.value"
                               (ngModelChange)="layerCheckboxChange($event,{layerName:item.layerName,layerId:item.layerId})">{{item.layerName}}</label>
                        <div class="display-color" [ngStyle]="{'backgroundColor':item.color}"></div>
                    </div>
                    <nz-empty *ngIf="layers.length < 1"></nz-empty>
                </div>
            </div>
            <div class="layers">
                <h3>地图集系统</h3>
                <div class="layers-content">
                    <div *ngFor="let item of atlas" class="layers-content-item">
                        <label nz-checkbox [(ngModel)]="item.value"
                               (ngModelChange)="layerCheckboxChange($event,{layersName:item.layersName,layersId:item.layersId})">{{item.layersName}}</label>
                        <div class="display-color" [ngStyle]="{'backgroundColor':item.color}"></div>
                    </div>
                    <nz-empty *ngIf="atlas.length < 1"></nz-empty>
                </div>
            </div>
        </div>

        <div id="labels" *ngIf="!searchResultContentSwitch">
            <div class="layers">
                <h3><i class="return-layers" (click)="searchResultContentSwitch=true" nz-icon nzType="left"
                       nzTheme="outline"></i>&nbsp;标签筛选</h3>
                <div class="layers-content">
                    <nz-input-group nzSearch [nzAddOnAfter]="suffixIconButton" class="label-search">
                        <input type="text" nz-input [(ngModel)]="labelSearch" placeholder="搜索您想要的标签"/>
                    </nz-input-group>
                    <ng-template #suffixIconButton>
                        <button (click)="labelSearchButtonClick()" nz-button nzType="primary" nzSearch><i nz-icon
                                                                                                          nzType="search"></i>
                        </button>
                    </ng-template>
                    <div *ngFor="let item of layerLabels" class="label-content">
                        <span class="label-content-dropdown" (click)="item.isOpen = !item.isOpen">{{item.name}}
                            <i nz-icon class="location-dropdown-icon"
                               [ngStyle]="{'transform':item.isOpen ? 'rotate(180deg)' : 'rotate(0deg)' }"
                               nzType="down"></i>
                        </span>
                        <ng-container *ngIf="item.isOpen">
                            <div *ngFor="let i of item.child" class="label-content-item">
                                <label nz-checkbox [(ngModel)]="i.value"
                                       (ngModelChange)="layerCheckboxChange($event,{layerName:i.layerName,layerId:i.layerId})">{{i.layerName}}</label>
                                <div class="display-color" [ngStyle]="{'backgroundColor':i.color}"></div>
                            </div>
                        </ng-container>
                    </div>
                    <nz-empty *ngIf="layerLabels.length < 1"></nz-empty>
                </div>
            </div>
        </div>

        <div class="reset">
            <button nz-button nzType="link" (click)="reset(searchResultContentSwitch?'layers':'labels')">重置</button>
        </div>
    </div>
</div>

<div id="popup" class="ol-popup">
    <a id="popup-closer" class="ol-popup-closer" style="cursor: pointer;" (click)="close()"></a>
    <div id="popup-content">
        <table border="1" class="table">
            <tr class="model_list">
                <td class="modelNames"> 属性</td>
                <td class="modelValues">值</td>
            </tr>
            <tr *ngFor="let model of areaAttributes">
                <td class="modelName"> {{model.field}}</td>
                <td class="modelValue">{{model.value}}</td>
            </tr>
        </table>
    </div>
</div>
